<script setup>
const props = defineProps({
  page: {
    type: Number,
    required: true,
  },
  itemsPerPage: {
    type: Number,
    required: true,
  },
  totalItems: {
    type: Number,
    required: true,
  },
});

const emit = defineEmits(["update:page", "update:itemsPerPage"]);

const updatePage = (value) => {
  emit("update:page", value);
  // 回到页面顶部
  scrollTo(0, 0)
};
const updatePageSize = (value) => {
  emit("update:itemsPerPage", value);
  // 回到页面顶部
  scrollTo(0, 0)
};
</script>

<template>
  <div>
    <VDivider />

    <div class="d-flex align-center justify-sm-space-between justify-center flex-wrap gap-3 px-6 py-3">
      <p class="text-disabled mb-0">
        {{ paginationMeta({ page, itemsPerPage }, totalItems) }}
      </p>
      <div class="d-flex align-center">
        <div class="me-3 d-flex">
          <AppSelect :model-value="itemsPerPage" :items="[
              { value: 20, title: '20' },
              { value: 50, title: '50' },
              { value: 100, title: '100' }
            ]" style="inline-size: 6.25rem;" @update:model-value="updatePageSize(parseInt($event, 10))" />
        </div>

        <VPagination :model-value="page" active-color="primary" :length="Math.ceil(totalItems / itemsPerPage)" :total-visible="$vuetify.display.xs ? 1 : Math.min(Math.ceil(totalItems / itemsPerPage), 5)" @update:model-value="updatePage" />
      </div>
    </div>
  </div>
</template>
